{% extends "base.html" %}

{% block stylesheets %}
	<link rel="stylesheet" href="{{ url_for('views.themes', path='css/challenge-board.css') }}">
{% endblock %}

{% block content %}
<div class="jumbotron" style="margin-bottom: 0px;">
	<div class="container">
		<h1><b>{{ 'Challenges' if en else '题目列表' }}</b></h1>
	</div>
</div>

<div class="modal fade" id="challenge-window" tabindex="-1" role="dialog">
</div>

<div class="container" style="max-width:90%">
	<div class="row">
		<div class="col-md-12">
			{% include "components/errors.html" %}
		</div>
	</div>
    <div id="main_container" style="display: flex;gap: 10px;" >
        <div style="width:200px;flex: none;">
            <div class="nav flex-column nav-pills category-bar" id="pages-board">
                <h5 style="text-align: center">{{ 'Categories' if en else '题目分类' }}</h5>
                <div style="width: 100%; height: 1px;background-color: #000; margin-bottom:10px;"></div>
            </div>
        </div>
        <div id='challenges-board' style="padding-left:20px;padding-right:0;flex: 1;">
            <div class="min-vh-50 d-flex align-items-center">
                <div class="text-center w-100">
                    <i class="fas fa-circle-notch fa-spin fa-3x fa-fw spinner"></i>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{% endblock %}

{% block entrypoint %}
	<script defer src="{{ url_for('views.themes', path='js/pages/challenges.js') }}"></script>
{% endblock %}
